<template>
  <v-expansion-panels class="tasksItemReportProblem-container" accordion flat>
    <v-expansion-panel v-for="item in propItems" :key="item.id">
      <v-expansion-panel-header hide-actions class="px-2 py-0">
        <template #default="{ open }">
          {{ item.serialNumber }} - {{ item.itemDescription }} (Symptoms：{{
            item.symptoms
          }})
          <v-btn v-if="open" class="flex-grow-0" small icon>
            <v-icon> mdi-minus </v-icon>
          </v-btn>
          <v-btn v-else class="flex-grow-0" small icon>
            <v-icon> mdi-plus </v-icon>
          </v-btn>
        </template>
      </v-expansion-panel-header>
      <v-expansion-panel-content class="px-2 mb-2">
        <v-row no-gutters>
          <v-col>
            <v-card class="mr-2 pa-1" color="#ECEDEE66" flat height="69">
              <h4>Symptoms</h4>
              {{ item.symptoms }}
            </v-card>
          </v-col>
          <v-col>
            <v-card class="mr-2 pa-1" color="#ECEDEE66" flat height="69">
              <h4>Problem</h4>
              {{ item.problemType }}
            </v-card>
          </v-col>
          <v-col>
            <v-card class="mr-2 pa-1" color="#ECEDEE66" flat height="69">
              <h4>Solution</h4>
              {{ item.solution }}
            </v-card>
          </v-col>
        </v-row>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
})
export default class TasksItemReportProblem extends Vue {
  get propItems() {
    return this.$props.items;
  }
}
</script>

<style lang="scss">
@import "@/components/Project/Tasks/TasksItemReportProblem.scss";
</style>
